<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>像素沙盒冒险</title>
    <link rel="stylesheet" href="public/css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser.min.js"></script>
    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
</head>
<body>
    <div id="game-container">
        <div id="login-screen" class="screen active">
            <div class="login-box">
                <h1>像素沙盒冒险</h1>
                <div class="login-form">
                    <input type="text" id="username" placeholder="输入用户名" maxlength="12">
                    <button id="guest-login">游客登录</button>
                    <button id="register-login">注册账号</button>
                </div>
            </div>
        </div>

        <div id="room-screen" class="screen">
            <div class="room-box">
                <h2>选择房间</h2>
                <div class="room-controls">
                    <button id="quick-join">快速加入</button>
                    <button id="create-room">创建房间</button>
                    <input type="text" id="room-code" placeholder="输入房间码" maxlength="6">
                </div>
                <div id="room-list" class="room-list"></div>
            </div>
        </div>

        <div id="game-screen" class="screen">
            <div id="game-canvas"></div>
            <div id="ui-overlay">
                <div id="inventory" class="inventory">
                    <div class="inventory-grid" id="inventory-grid"></div>
                    <div class="crafting-area">
                        <h3>合成</h3>
                        <div id="crafting-recipes"></div>
                    </div>
                </div>
                <div id="player-info">
                    <span id="player-name"></span>
                    <span id="room-code-display"></span>
                </div>
            </div>
        </div>
    </div>

    <script src="public/js/game.js"></script>
    <script src="public/js/ui.js"></script>
    <script src="public/js/network.js"></script>
</body>
</html>